"use client"

import React from 'react'
import { MainLayout } from '@/components/layout/main-layout'
import { 
  BarChart3, 
  TrendingUp, 
  Users, 
  Activity,
  Calendar,
  Download
} from 'lucide-react'
import { Button } from '@/components/ui/button'

// 模拟图表组件
function SimpleChart({ title, data, color = "blue" }: {
  title: string
  data: number[]
  color?: string
}) {
  const max = Math.max(...data)
  
  return (
    <div className="bg-white rounded-lg border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
      <div className="flex items-end space-x-2 h-32">
        {data.map((value, index) => (
          <div key={index} className="flex-1 flex flex-col items-center">
            <div 
              className={`w-full bg-${color}-500 rounded-t`}
              style={{ height: `${(value / max) * 100}%` }}
            />
            <span className="text-xs text-gray-500 mt-2">{index + 1}月</span>
          </div>
        ))}
      </div>
    </div>
  )
}

// 统计卡片组件
function AnalyticsCard({ 
  title, 
  value, 
  change, 
  icon: Icon, 
  color = "blue" 
}: {
  title: string
  value: string
  change: string
  icon: any
  color?: string
}) {
  const isPositive = change.startsWith('+')
  
  return (
    <div className="bg-white rounded-lg border border-gray-200 p-6">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-gray-600">{title}</p>
          <p className="text-3xl font-bold text-gray-900 mt-2">{value}</p>
          <div className="flex items-center mt-2">
            {isPositive ? (
              <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
            ) : (
              <TrendingUp className="h-4 w-4 text-red-500 mr-1 rotate-180" />
            )}
            <span className={`text-sm font-medium ${
              isPositive ? 'text-green-600' : 'text-red-600'
            }`}>
              {change}
            </span>
            <span className="text-sm text-gray-500 ml-1">vs 上月</span>
          </div>
        </div>
        <div className={`p-3 rounded-full bg-${color}-100`}>
          <Icon className={`h-8 w-8 text-${color}-600`} />
        </div>
      </div>
    </div>
  )
}

export default function AnalyticsPage() {
  // 模拟数据
  const monthlyUsers = [120, 135, 148, 162, 178, 195, 210, 225, 240, 258, 275, 292]
  const monthlyRecords = [450, 520, 580, 640, 720, 800, 880, 960, 1040, 1120, 1200, 1280]
  const healthMetrics = [85, 88, 90, 87, 92, 89, 94, 91, 96, 93, 98, 95]

  return (
    <MainLayout title="数据分析">
      <div className="space-y-6">
        {/* 操作栏 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <select className="h-10 rounded-md border border-gray-300 bg-white px-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
              <option value="2024">2024年</option>
              <option value="2023">2023年</option>
            </select>
            <select className="h-10 rounded-md border border-gray-300 bg-white px-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
              <option value="all">全部数据</option>
              <option value="users">用户数据</option>
              <option value="health">健康数据</option>
            </select>
          </div>
          <Button>
            <Download className="h-4 w-4 mr-2" />
            导出报告
          </Button>
        </div>

        {/* 关键指标 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <AnalyticsCard
            title="总用户数"
            value="1,234"
            change="+12.5%"
            icon={Users}
            color="blue"
          />
          <AnalyticsCard
            title="健康记录"
            value="15,678"
            change="+18.2%"
            icon={Activity}
            color="green"
          />
          <AnalyticsCard
            title="活跃度"
            value="89.5%"
            change="+5.3%"
            icon={TrendingUp}
            color="purple"
          />
          <AnalyticsCard
            title="健康评分"
            value="92.8"
            change="+2.1%"
            icon={BarChart3}
            color="orange"
          />
        </div>

        {/* 图表区域 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <SimpleChart
            title="月度用户增长"
            data={monthlyUsers}
            color="blue"
          />
          <SimpleChart
            title="健康记录趋势"
            data={monthlyRecords}
            color="green"
          />
        </div>

        <div className="grid grid-cols-1 gap-6">
          <SimpleChart
            title="健康指标评分"
            data={healthMetrics}
            color="purple"
          />
        </div>

        {/* 详细统计 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* 用户分布 */}
          <div className="bg-white rounded-lg border border-gray-200 p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">用户角色分布</h3>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600">普通用户</span>
                <div className="flex items-center space-x-2">
                  <div className="w-32 bg-gray-200 rounded-full h-2">
                    <div className="bg-blue-500 h-2 rounded-full" style={{ width: '85%' }}></div>
                  </div>
                  <span className="text-sm font-medium text-gray-900">1,048</span>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600">VIP用户</span>
                <div className="flex items-center space-x-2">
                  <div className="w-32 bg-gray-200 rounded-full h-2">
                    <div className="bg-purple-500 h-2 rounded-full" style={{ width: '12%' }}></div>
                  </div>
                  <span className="text-sm font-medium text-gray-900">148</span>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600">管理员</span>
                <div className="flex items-center space-x-2">
                  <div className="w-32 bg-gray-200 rounded-full h-2">
                    <div className="bg-orange-500 h-2 rounded-full" style={{ width: '3%' }}></div>
                  </div>
                  <span className="text-sm font-medium text-gray-900">38</span>
                </div>
              </div>
            </div>
          </div>

          {/* 健康数据类型分布 */}
          <div className="bg-white rounded-lg border border-gray-200 p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">健康数据类型</h3>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600">血压记录</span>
                <div className="flex items-center space-x-2">
                  <div className="w-32 bg-gray-200 rounded-full h-2">
                    <div className="bg-red-500 h-2 rounded-full" style={{ width: '40%' }}></div>
                  </div>
                  <span className="text-sm font-medium text-gray-900">6,271</span>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600">心率记录</span>
                <div className="flex items-center space-x-2">
                  <div className="w-32 bg-gray-200 rounded-full h-2">
                    <div className="bg-pink-500 h-2 rounded-full" style={{ width: '30%' }}></div>
                  </div>
                  <span className="text-sm font-medium text-gray-900">4,703</span>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600">体重记录</span>
                <div className="flex items-center space-x-2">
                  <div className="w-32 bg-gray-200 rounded-full h-2">
                    <div className="bg-blue-500 h-2 rounded-full" style={{ width: '20%' }}></div>
                  </div>
                  <span className="text-sm font-medium text-gray-900">3,136</span>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600">体温记录</span>
                <div className="flex items-center space-x-2">
                  <div className="w-32 bg-gray-200 rounded-full h-2">
                    <div className="bg-orange-500 h-2 rounded-full" style={{ width: '10%' }}></div>
                  </div>
                  <span className="text-sm font-medium text-gray-900">1,568</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 最近活动摘要 */}
        <div className="bg-white rounded-lg border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">数据洞察</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center">
              <div className="text-2xl font-bold text-blue-600 mb-2">68%</div>
              <div className="text-sm text-gray-600">用户健康状况良好</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-green-600 mb-2">24%</div>
              <div className="text-sm text-gray-600">用户数据记录完整</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-purple-600 mb-2">15天</div>
              <div className="text-sm text-gray-600">平均记录间隔</div>
            </div>
          </div>
        </div>
      </div>
    </MainLayout>
  )
}